<template>
  <div class="contact-page">
    <!-- 头部横幅 -->
    <div class="bg-gradient-to-r from-green-600 to-blue-600 text-white py-16">
      <div class="container-custom">
        <h1 class="text-4xl font-bold mb-4">联系我们</h1>
        <p class="text-xl opacity-90">我们随时为您提供帮助与支持</p>
      </div>
    </div>

    <div class="container-custom py-12">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
        <!-- 联系方式 -->
        <div>
          <h2 class="text-2xl font-bold text-gray-900 mb-6">联系方式</h2>
          
          <div class="space-y-6">
            <!-- 客服邮箱 -->
            <div class="card">
              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                  <div class="i-mdi-email text-2xl text-blue-600" />
                </div>
                <div class="flex-1">
                  <h3 class="font-bold text-gray-900 mb-1">客服邮箱</h3>
                  <p class="text-gray-600 mb-2">我们会在24小时内回复您的邮件</p>
                  <a href="mailto:support@codevault.com" class="text-blue-600 hover:text-blue-700">
                    support@codevault.com
                  </a>
                </div>
              </div>
            </div>

            <!-- 客服热线 -->
            <div class="card">
              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                  <div class="i-mdi-phone text-2xl text-green-600" />
                </div>
                <div class="flex-1">
                  <h3 class="font-bold text-gray-900 mb-1">客服热线</h3>
                  <p class="text-gray-600 mb-2">工作时间：周一至周五 9:00-18:00</p>
                  <a href="tel:400-123-4567" class="text-green-600 hover:text-green-700 text-xl font-medium">
                    400-123-4567
                  </a>
                </div>
              </div>
            </div>

            <!-- 微信客服 -->
            <div class="card">
              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center flex-shrink-0">
                  <div class="i-mdi-wechat text-2xl text-emerald-600" />
                </div>
                <div class="flex-1">
                  <h3 class="font-bold text-gray-900 mb-1">微信客服</h3>
                  <p class="text-gray-600 mb-2">扫码添加客服微信，获得即时帮助</p>
                  <p class="text-emerald-600 font-medium">微信号：CodeVault2024</p>
                </div>
              </div>
            </div>

            <!-- 公司地址 -->
            <div class="card">
              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                  <div class="i-mdi-map-marker text-2xl text-purple-600" />
                </div>
                <div class="flex-1">
                  <h3 class="font-bold text-gray-900 mb-1">公司地址</h3>
                  <p class="text-gray-600 mb-2">欢迎预约到访</p>
                  <p class="text-gray-700">
                    北京市朝阳区建国路88号<br />
                    现代城市广场A座2801室
                  </p>
                </div>
              </div>
            </div>
          </div>

          <!-- 社交媒体 -->
          <div class="mt-8">
            <h3 class="font-bold text-gray-900 mb-4">关注我们</h3>
            <div class="flex space-x-4">
              <a href="#" class="w-12 h-12 bg-gray-100 hover:bg-blue-100 rounded-lg flex items-center justify-center transition-colors">
                <div class="i-mdi-wechat text-2xl text-gray-600" />
              </a>
              <a href="#" class="w-12 h-12 bg-gray-100 hover:bg-gray-800 rounded-lg flex items-center justify-center transition-colors">
                <div class="i-mdi-github text-2xl text-gray-600" />
              </a>
              <a href="#" class="w-12 h-12 bg-gray-100 hover:bg-blue-400 rounded-lg flex items-center justify-center transition-colors">
                <div class="i-mdi-twitter text-2xl text-gray-600" />
              </a>
              <a href="#" class="w-12 h-12 bg-gray-100 hover:bg-red-500 rounded-lg flex items-center justify-center transition-colors">
                <div class="i-mdi-youtube text-2xl text-gray-600" />
              </a>
            </div>
          </div>
        </div>

        <!-- 留言表单 -->
        <div>
          <h2 class="text-2xl font-bold text-gray-900 mb-6">在线留言</h2>
          
          <div class="card">
            <form @submit.prevent="handleSubmit">
              <!-- 姓名 -->
              <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  姓名 <span class="text-red-500">*</span>
                </label>
                <input
                  v-model="form.name"
                  type="text"
                  placeholder="请输入您的姓名"
                  class="input w-full"
                  required
                />
              </div>

              <!-- 邮箱 -->
              <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  邮箱 <span class="text-red-500">*</span>
                </label>
                <input
                  v-model="form.email"
                  type="email"
                  placeholder="请输入您的邮箱"
                  class="input w-full"
                  required
                />
              </div>

              <!-- 电话 -->
              <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  电话
                </label>
                <input
                  v-model="form.phone"
                  type="tel"
                  placeholder="请输入您的电话"
                  class="input w-full"
                />
              </div>

              <!-- 主题 -->
              <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  主题 <span class="text-red-500">*</span>
                </label>
                <select v-model="form.subject" class="input w-full" required>
                  <option value="">请选择留言主题</option>
                  <option value="咨询">产品咨询</option>
                  <option value="建议">意见建议</option>
                  <option value="投诉">问题投诉</option>
                  <option value="合作">商务合作</option>
                  <option value="其他">其他</option>
                </select>
              </div>

              <!-- 留言内容 -->
              <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  留言内容 <span class="text-red-500">*</span>
                </label>
                <textarea
                  v-model="form.message"
                  rows="6"
                  placeholder="请详细描述您的问题或建议"
                  class="input w-full resize-none"
                  required
                />
              </div>

              <!-- 提交按钮 -->
              <button
                type="submit"
                :disabled="loading"
                class="btn-primary w-full py-3"
              >
                {{ loading ? '提交中...' : '提交留言' }}
              </button>

              <p class="text-sm text-gray-500 mt-4 text-center">
                我们会在1-3个工作日内回复您的留言
              </p>
            </form>
          </div>
        </div>
      </div>

      <!-- 工作时间说明 -->
      <div class="mt-12 card bg-blue-50">
        <div class="flex items-start space-x-4">
          <div class="i-mdi-clock text-3xl text-blue-600" />
          <div>
            <h3 class="font-bold text-gray-900 mb-2">工作时间</h3>
            <div class="text-gray-600 space-y-1">
              <p><strong>客服在线时间：</strong>周一至周五 9:00-18:00</p>
              <p><strong>邮件回复时间：</strong>24小时内（工作日）</p>
              <p><strong>技术支持：</strong>VIP/SVIP会员享受7×12小时服务</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const form = reactive({
  name: '',
  email: '',
  phone: '',
  subject: '',
  message: ''
})

const loading = ref(false)

async function handleSubmit() {
  loading.value = true
  
  try {
    // TODO: 实现留言提交接口
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    alert('感谢您的留言！我们会尽快与您联系。')
    
    // 重置表单
    form.name = ''
    form.email = ''
    form.phone = ''
    form.subject = ''
    form.message = ''
  } catch (error) {
    alert('提交失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

useSeoMeta({
  title: '联系我们 - 代码小库',
  description: '通过邮箱、电话、微信等多种方式联系代码小库客服团队，我们随时为您提供帮助与支持',
  ogTitle: '联系我们 - 代码小库',
  ogDescription: '我们随时为您提供帮助与支持',
})
</script>

